<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="/vue/lib/vue.js"></script>
</head>

<body>
  <div id="box">
    {{ms}}
    <h1>{{count}}</h1>
    <h1>{{user.id}}</h1>
    <!-- 一个差值表达式里面只能写一个值 -->
    <h1>{{user.name}}</h1>
    <h1>{{user.age}}</h1>
    <h1>{{user.age*2}}</h1>
    <h1>{{diqu[0]=='北京'}}</h1>//输入下标就可以获取
    <h1>长度是{{diqu[0].length}}</h1>//输入下标就可以获取
    <h1>{{userlist[1].name}}</h1>
  </div>
  <script>
    let vue = new Vue({
      el: '#box',//指定vue作用范围
      data: {
        //用来给vue定义一系列数据
        ms: "hello vue",
        count: 1,
        // 定义对象
        user: {
          id: '001',
          name: 'aaa',
          age: 22
        },
        diqu: ['北京', '天津', '广州'],
        userlist: [
          { id: '001', name: 'aaa', age: 22 },
          { id: '002', name: 'abb', age: 22 },
          { id: '003', name: 'ccc', age: 22 }

        ]


      }
    })
  </script>
</body>

</html>